<script setup lang="ts">
import { ref, computed, getCurrentInstance } from "vue";
import portService from "@/apis";
import useUserStore from "@/pinia/user";
import type Typings from "@/typings";

const curIns = getCurrentInstance()?.proxy;

const formData = ref({
  account: "",
  password: "",
});

const formJson = computed<Typings.XtPublic.DynamicForm.formJson[]>(() => {
  return [
    {
      el: "input",
      span: 24,
      prop: "account",
      placeholder: "请输入账号",
      rules: [{ required: true, message: "不能为空", trigger: "blur" }],
    },

    {
      el: "input",
      span: 24,
      prop: "password",
      placeholder: "请输入密码",
      type: "password",
      "show-password": true,
      rules: [{ required: true, message: "不能为空", trigger: "blur" }],
    },
  ];
});

const form = ref();
const loading = ref(false);
const onSubmit = async () => {
  await form.value.getInstance().validate();
  try {
    loading.value = true;
    const { data, code } = await portService.loginApi(formData.value);
    const userStore = useUserStore();
    userStore.setUserInfo(data);
    if (code === 0) {
      window.sessionStorage.setItem("SHOW_TODO_INFO", "1");
      curIns?.$router.replace({
        path: "/dashboard",
      });
    }
  } finally {
    loading.value = false;
  }
};
</script>

<template>
  <div class="w-screen h-screen bg-[#181818] relative">
    <div
      class="form-container w-[600px] h-[200px] absolute left-1/2 -translate-1/2 top-[40vh]"
    >
      <h3 class="text-white text-[30px] text-center font-bold mb-[12px]">
        系统登录
      </h3>

      <xt-dynamic-form
        ref="form"
        :label-width="0"
        :data="formData"
        :formJson="formJson"
        size="large"
      ></xt-dynamic-form>

      <xt-button
        class="w-full"
        size="large"
        @click="onSubmit"
        :loading="loading"
        >登 录</xt-button
      >
    </div>
  </div>
</template>
